<template>
  <div>
    <div style="padding-top: 50px;padding-bottom: 90px;text-align:center;">
      <l_banner :c_banner="banner_arr2"></l_banner>
    </div>
    <div style="padding:0 40px;" class="center ">
      <div class="border1">
        <l_brand></l_brand>
      </div>
    </div>
    <div style="padding:20px 40px;overflow:hidden;" class="cent ">
      <div class="border2" style="padding-bottom:40px;">
           <div class="big" style="overflow:hidden;padding-top:8px;" >
          <div
            style="float:left;max-width: 23%;min-height:349px;overflow:hidden;padding:0px 10px;"
            v-for="i in l_event" class=" border4"
          >
            <div
              style="display:block;"
            >
              <a href="" style="display:block;" :title="i.h4" class="cont">
                <div style="margin:0 auto;width:272px" >
                  <img style="height:181px;width:100%" :src="i.img" alt="" />
                </div>
                <h4
                  style="

        font-size: 40px;
        font-weight: bold;
        font-style: normal;
        color: #000;
        padding-top: 30px;
    padding-bottom: 15px;padding-left:10px;
                ">
                  {{i.h4}}
                </h4>
              </a>
              <p
                style="color: #000000;
        font-size: 13px;
        font-family: 微軟正黑體;
        line-height: 26px;
        padding-top: 10px;padding-left:10px;"
              >
               {{i.p}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import l_banner from './assets/l_banner'
import l_brand from './assets/l_brand'
import l_event from './assets/l_event'
export default {
   data(){
    return{

      banner_arr2:[
        {title:'ABOUT US',para:'被穿著在WorldTour赛事中贏得勝利，Aero系列包含有我們最速和最先進科技化的競赛車服。歷經多年研發只為助您縮短比赛秒數。'}
      ],
      l_event:[
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9kOGMxZTBkMjBlM2QyOGMxODM5MzUwOTI0NGYzNmNkNC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: '2012',
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户， 还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi81YzQ2NWM5YWQ1YTNhODc3MTcwODA5MDMxNWYxZWY1OC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: '2014',
            p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户， 还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9jNWM2MTEwOGJlMDBmMmUzNjY0MDFiZWY3ODk3OGUwYi01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "2015",
            p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户， 还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9iNzlmZGUxODY3ZTdmMGZiNDg0ODlmNTg1ZDY4YjEyYy01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: '2018',
            p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户， 还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。"
        }
      ]
    }
  },
   components:{
    l_banner,
    l_brand,
    l_event,
  },
}
</script>
<style >

    .border1{
    border-top:1px solid rgba(224,224,224,1);
  }
  .border2{
    border-bottom:1px solid rgba(224,224,224,1);
  }
  .border3{
    border-left:1px solid rgba(224,224,224,1);
  }
  .border4{
    border-right:1px solid rgba(224,224,224,1);
  }
  .cont h4{
     font-family: "oswald-ttf.sfd";
  }
</style>
